<template>
    <van-popup  position="bottom" :overlay="true" v-model="showArea">
             <van-picker :columns="columns" show-toolbar @cancel="onCancel" @confirm="onConfirm" @change="onChange" v-if="pickerOr_area" />
             <van-area   columns-num="3"  @confirm="onConfirm" @cancel="onCancel" :area-list="col" v-else/>
    </van-popup>
</template>
<script>
import areaList from '../assets/area';
    export default{
        name:'minePopupPicker',

        props:{
            col:{
                type:[Array,Object],

            },
            models:'',
            columns_type:{
                type:String,
                default:'singleColumn',
                validator:function(value){
                    return ['singleColumn','mulColumns','area'].includes(value)
                }
            }
        },
        methods:{
            onCancel(){//取消时隐藏
            this.showArea=false
        },
            onConfirm(e){//确认时隐藏并且返回当前models给resume，用于双向绑定数据用
                this.showArea=false;
                this.$emit('getSelectValue',e,this.models)
            },
            onChange(picker, values) {//用于改变当前要显示的此选项
                picker.setColumnValues(1, this.col[values[0]]);
                }
        },
        data(){
            return{
                showArea:false,
                // areaList:areaList//引入的地区json
            }
        },
        computed:{
            columns(){
                if(this.columns_type=='singleColumn'){
                    return this.col
                }else if(this.columns_type=='mulColumns'){//多列联动时
                    let arr=[];
                    arr=[{ 
//传入的col是官网的数据格式// const citys = {
//   '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
//   '福建': ['福州', '厦门', '莆田', '三明', '泉州']
// }
                            values: Object.keys(this.col),
                            className: 'column1'
                            },
                            {
                            values: this.col[Object.keys(this.col)[0]],
                            className: 'column2',
                            defaultIndex: 0
                        }]
                        // console.log(arr)
                        return arr
                }
            },
            pickerOr_area(){
                if(this.columns_type=='singleColumn'|| this.columns_type=='mulColumns'){
                    return true
                }else{
                    return false
                }
                return true
            }
        },
        watch:{
            // columns(v){
            //     console.log(v)
            // }
        }
    }
</script>
<style scoped>

</style>
<style >
    .van-modal{
        width:100vw;
        height: 100vh;
    }
</style>
